<template>
	<view class="img-box m-b-25">
		<template v-if="props.data?.style != 0">
			<view :class="['img-box', `img-box-${props.data?.style}`]">
				<view class="img-item" v-for="item, index in props.data.list" :key="index"
					:style="{ 'padding': `${props.data.margin / 2}px` }" @click="handleAdvertiseDetail(item?.linkType, item?.linkValue)">
					<image class="img" :src="item.image || handleStaticResources('/static/images/common/empty.png')"
						mode="widthFix"></image>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="card-img-box">
				<view class="left" :style="{ 'padding-right': `${props.data.margin / 2}px` }">
					<image class="img"
						@click="handleAdvertiseDetail(props.data?.list[0]?.linkType, props.data?.list[0]?.linkValue)"
						:src="props.data?.list[0]?.image || handleStaticResources('/static/images/common/empty.png')"
						mode="widthFix"></image>
				</view>
				<view class="right" :style="{ 'padding-left': `${props.data.margin / 2}px` }">
					<view class="top" :style="{ 'padding-bottom': `${props.data.margin / 2}px` }">
						<image class="img"
							@click="handleAdvertiseDetail(props.data?.list[1]?.linkType, props.data?.list[1]?.linkValue)"
							:src="props.data?.list[1]?.image || handleStaticResources('/static/images/common/empty.png')"
							mode="aspectFill"></image>
					</view>
					<view class="bottom" :style="{ 'padding-top': `${props.data.margin / 2}px` }">
						<view class="bottom-left" :style="{ 'padding-right': `${props.data.margin / 2}px` }">
							<image class="img"
								@click="handleAdvertiseDetail(props.data?.list[2]?.linkType, props.data?.list[2]?.linkValue)"
								:src="props.data?.list[2]?.image || handleStaticResources('/static/images/common/empty.png')"
								mode="widthFix"></image>
						</view>
						<view class="bottom-right" :style="{ 'padding-left': `${props.data.margin / 2}px` }">
							<image class="img"
								@click="handleAdvertiseDetail(props.data?.list[3]?.linkType, props.data?.list[3]?.linkValue)"
								:src="props.data?.list[3]?.image || handleStaticResources('/static/images/common/empty.png')"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script setup lang="ts">
	import { handleStaticResources, handleAdvertiseDetail } from '@/core/utils';

	const props = withDefaults(defineProps<{
		data : any,
	}>(), {
		data: {},
	});
</script>
<style lang="scss" scoped>
	@import './home-img-window.scss';
</style>